[#ftl]
[@define "agile._ContainerToolbar"]
	minChildSize:1	
	,maxChildSize:1000
	,init:function(){
		if(this._initContainerToolbar){ return;}
		this._initContainerToolbar = true;
		
//		console.log(this.declaredClass,"[agile._ContainerToolbar]init");
		
		this.initToolbar();			
		this.postInitToolbar();
//		this.subscribe(this.getContainerId()+"-selectChild","showControlButtons");
//	//	on(this,"onChildSelected",this,"showControlButtons");
//		var selectedChild = this.getSelectedChildren()[0];
////		console.log(this.declaredClass,"[agile._ContainerToolbar]selectedChild",selectedChild);
//		if(selectedChild){
//			this.showControlButtons(selectedChild);
//		}	
	}
	,getContainerId:function(){
		return this.id;
	}
	,initToolbar:function(){
//		console.log(this.declaredClass,"[agile._ContainerToolbar]initToolbar");
		var toobarHtml = "<div class='agileButton agileButtonRemove'></div><div class='agileButton agileButtonAdd'></div>";	
		var toolbarDom = this.toolbarDom = construct.create("div",{innerHTML:toobarHtml});
		style.set(toolbarDom,{display:"inline",width:"30px"});
		query(".agileButtonRemove",toolbarDom).forEach(function(node){
			node.title = agile.i18n("remove_btn_tips",null,"Remove");
			this.removeButton = node;
			aspect.after(node,"onclick",lang.hitch(this,function(event){				
				//event.stop();				
//				this.selectedChild.selected = false;
				//TODO: destroy the selected child;				
				topic.publish("agile.message.confirm",agile.i18n("msg_remove_confirm"),null,this,{ok:function(){
					//console.log("this.selectedChild=",this.selectedChild);
					var child = this.selectedChild;
					this.removeChild(child);
					agile.commit([{action:"delete",target:child}]);
					topic.publish("agile.widget.removed",child);
				},cancel:function(){}});								
			}),true);
		},this);
	
		query(".agileButtonAdd",toolbarDom).forEach(function(node){
			node.title = agile.i18n("add_btn_tips",null,"Add");
			this.addButton = node;
			this.own(on(node,"click",lang.hitch(this,function(event){
				var child = this.createChild();
				this.addComponent(child);				
				agile.commit([{action:"add",target:child}]);
				//20151108:tentative fix for position bug of widget in the new created content pane
				if(this.computeChildrenSize){
					this.computeChildrenSize();
				}
			})));
		},this);
	}
	,postInitToolbar:function(){
		
	}
	,showControlButtons:function(child){		
//		console.log(this.declaredClass,"showControlButtons:",this._getChildren().length,this.minChildSize,this.maxChildSize);
		//summary:show the add/remove icon
		query(".agileButton",this.toolbarDom).style("display","inline");
		if(this.minChildSize == this.maxChildSize){
			query(".agileButtonRemove",this.toolbarDom).style("display","none");
		}
		else{			
			if(this.getChildren().length == this.minChildSize){
				query(".agileButtonRemove",this.toolbarDom).style("display","none");			
			}
			
			if(this.getChildren().length == this.maxChildSize){
				query(".agileButtonAdd",this.toolbarDom).style("display","none");			
			}
		}
		this.selectedChild = child;
		construct.place(this.toolbarDom,child?child.getToolbarAnchorNode():this.getToolbarAnchorNode(),"last");		
	}	
	,getToolbarAnchorNode:function(){
		return this.domNode;
	}
[/@]
